fix(cdk/overlay): scroll was blocked when zoomed out even if scrolling wasn't an option #30762
+53
−2
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
szoboszlaypali
requested review from
andrewseguin and
wagnermaciel
and removed request for
a team
|
This PR was created after I realized that I merged into my previous changes instead of rebasing, then the revert made it even worse. Previous #30548 |
…g wasn't an option Fixes that an unnecessary disabled scroll bar was added when zoomed out during opening dialogs. Fixes angular#25054
mmalerba
force-pushed
the
global-scrollblock-fix
branch
from
fb5ef05 to
394ae27
Compare
|
The changes were merged into the following branches: main, 19.2.x |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes that an unnecessary disabled scroll bar was added when zoomed out during opening dialogs.
Fixes #25054.
When you zoom out using the browser (not the style.zoom css), dimensions can become non-whole numbers. window.innerHeight/innerWidth uses Math.floor to round these dimensions, while body.scrollHeight/scrollWidth uses Math.round (at least that's what I assume), so in case you zoom out and your browser shows that your width is 1000.66px for example, the previous implementation returned false positives if there were no scroll bars, as the scrollWidth was 1001px while innerWidth was only 1000.
Another thing I've ran into is using the style.zoom css api, while the innerHeight and innerWidth remains unchanged during zoom, working as intended body.scrollWidth can outgrow window.innerWidth without a scroll bar appearing (easily testable with the Google home page).
Relying on the root documentElement's scrollWidth and scrollHeight seems to fix both cases.